// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react';

type Props = {
    id?: string;
}

// NOTE: this SVG Symbol component needs to be included inside an <SVG /> container
const BackgroundPillSymbol = ({id = 'pill'}: Props): JSX.Element => (
    <symbol
        id={id}
        viewBox='0 0 900 535'
    >
        <rect
            className='stipple'
            x='0'
            y='0'
            width='900'
            height='535'
            mask={`url(#${id}_stippleMask)`}
            style={{fill: 'rgba(128, 128, 128, 0.12)'}}
        />
        <path
            className='pill-base'
            style={{fill: 'rgb(var(--center-channel-bg-rgb))'}}
            d='M600 40H0V490H600C724.264 490 825 389.264 825 265C825 140.736 724.264 40 600 40Z'
        />
        <path
            className='pill-colour-overlay'
            style={{fill: 'rgba(var(--center-channel-color-rgb), 0.08)'}}
            d='M600 40H0V490H600C724.264 490 825 389.264 825 265C825 140.736 724.264 40 600 40Z'
        />
        <path
            className='pill-gradient'
            style={{fill: `url(#${id}_pillGradient)`}}
            d='M600 40H0V490H600C724.264 490 825 389.264 825 265C825 140.736 724.264 40 600 40Z'
        />
        <defs>
            <mask id={`${id}_stippleMask`}>
                <image
                    x='0'
                    y='0'
                    width='900'
                    height='535'
                    href=''
                />
            </mask>
            <linearGradient id={`${id}_pillGradient`}>
                <stop
                    offset='35%'
                    style={{stopColor: 'rgb(var(--center-channel-bg-rgb))', stopOpacity: 0}}
                />
                <stop
                    offset='90%'
                    style={{stopColor: 'rgb(var(--center-channel-bg-rgb))', stopOpacity: 1}}
                />
            </linearGradient>
        </defs>
    </symbol>
);

export default BackgroundPillSymbol;
